<template>
    <!-- 上面是点击search出现的弹窗，下面是第二部分行 -->
    <header class="lzm">
        <div  v-if="wrapIsShow" style="height: 100%; width: 20%;">
            <div class="wrapPicture" @click="returnHome" style="height: 100%; width: 100%;display: flex; justify-content: center; align-items: center;margin-left:30%; margin-top:-10px;">
                 <el-image style="height: 40px;" src="/images/Logo/FB_text.jpg" /> 
            </div>
            <div class="wrap" >
                <el-button>
                </el-button>
                <el-button @click="turn('/store')" >
                    <h3><StoreMenu></StoreMenu></h3>   
                </el-button>
               
                <el-button @click="turn('/community/repair')">
                    <h3><CommunityMenu></CommunityMenu></h3>                    
                </el-button>
                <el-button @click="toOther('/accountInformation')">
                    <h3>账户管理</h3>                  
                </el-button>
                <el-button @click="toOther('/personalCenter')">
                    <h3>个人中心</h3>                 
                </el-button>
                <el-button @click="toOther('/merchant-login')">
                    <h3>商家入驻</h3>                 
                </el-button>
            </div>
        <el-button class="searchButton" :icon="Search" @click="showSearch"/> 
        </div>
    </header>

    <div  class="search" >
        <div>
            <el-collapse  v-model="activeNames">
                <template #default>
                <el-input v-if="IsShow1"
                    v-model="searchText"
                    placeholder="搜索商品"
                    :prefix-icon="Search"
                    />
                    
                    <!-- 需要数据 -->
                    <div class="searchBottom" >
                      <el-collapse-item title="最近搜索" name="1"  v-if="IsShow2">
                        <div class="d1">
                            <el-button round> <a href="https://baidu.com">百度之星</a></el-button>
                           
                        </div>
                        </el-collapse-item>
                        <el-collapse-item title="猜你想搜" name="2"  v-if="IsShow2">
                    
                            <div>
                                <el-button round><a href="https://baidu.com">百度</a></el-button>
                            </div>
                        </el-collapse-item>
                    </div> 
                </template>
            </el-collapse>
        </div>
    </div>
    <!-- 遮罩层 -->
    <div id="overlay" class="overlay"></div>
</template>
<script setup>





let activeNames = [ '1' , '2' ]//默认展开的name=1||2
let wrapIsShow = ref(true)
let IsShow1 = ref(false)
let IsShow2 = ref(false)
let searchText = ref ('')
import {ref} from 'vue'
import {Search} from '@element-plus/icons-vue'
import CommunityMenu from '../second-lzm/menu/community-menu.vue';
import StoreMenu from '@/views/second-lzm/menu/store-menu.vue'
import router from '@/router'; 
 const emits=defineEmits(['navigate','returnHome'])
const turn= (path)=>{
   emits('navigate',path)
}
function toOther(path){
    router.push(path)
}
function returnHome(){
   emits('returnHome')
}
function showSearch(){
    setTimeout(() => {
        wrapIsShow.value=false;
        IsShow1.value=true;
    }, 150);
    //需要做个动画，0.35 s后打开第二层.注：此处延迟可能为接收数据时间的等待，后期需要更改。
    setTimeout(() => {
        IsShow2.value = true;
 
    }, 450);
    setupOverlayClick()
}

// 显示遮罩层
function showOverlay() {
    document.getElementById('overlay').style.display = 'block';
}

// 隐藏遮罩层
function hideOverlay() {
    document.getElementById('overlay').style.display = 'none';
}

function turnStore(){
    router.push('/store'); 
}

//搜索触发遮罩层，触发禁止滑动事件。（未做）
function setupOverlayClick() {
    var overlay = document.getElementById('overlay');
    showOverlay()
    overlay.addEventListener('click', function(event) {
        if (event.target === overlay) { 
            hideOverlay();
            IsShow1.value=false;
            IsShow2.value=false;
            wrapIsShow.value=true;
        }
    });
}
</script>
<style scoped lang="scss">
*{
    border:0;
    padding:0;
    box-sizing: border-box;
}
a {
  text-decoration: none; /* 去掉下划线 */
  color: inherit; /* 继承父元素的字体颜色 */
  background: none; /* 去掉背景颜色 */
  border: none; /* 去掉边框 */
}

.d1{
    display: flex;
    align-content: center;
    align-items: center;
}
#overlay {
    
    position: fixed;
    top: 150px;
    left: 0;
    width: 100vw;
    height: 100%;
    background: rgba(0, 0, 0, 0.2); /* 半透明背景 */
    display: none; /* 默认隐藏 */
    z-index: 1000; /* 确保遮罩层在最上面 */
}

:deep(.el-collapse-item__header){
    display: block;
    text-align:center;
}
.search {
    
    width: 600px; /* 父类宽度 */
    height: auto; /* 高度自适应 */
    position: relative;
    margin: 0 auto; /* 居中对齐 */
    z-index: 1001;
    top: -50px;
    .el-collapse{
            border: transparent;
            
          }
    }
        .search .el-collapse {
            
            width: 100%; /* 占满父容器宽度 */
            display: flex;
            flex-direction: column; /* 垂直布局 */
            padding: 0; 
        }

        .search .el-collapse .el-input {
            
            height: 30px; /* 高度设置 */
            width: 100%; /* 宽度与父容器一致 */
        }
        .searchBottom{

            width: 104%;
            position: absolute;
            margin-left: -12px;
            margin-top: 50px;

            
        }
        .search .el-collapse .el-collapse-item {
            
            width: 100%; /* 宽度与父容器一致 */
            flex: 1; /* 占用剩余空间 */
           
            
            /* background-color: aliceblue; */
        }
.lzm {
    overflow-x: hidden;
    height: 114px;
    position: relative; /* 确保子元素绝对定位相对于父元素 */
    //最后需要的调整位置。  
    display: block;
    /* background-color: aliceblue; */
    }

    .wrap {
    position: absolute;
    left: 20%;
    height: 100%; /* 占据 lzm 的百分之百高度 */


    top: 0; /* 从顶部开始 */
    width: 100%; /* 占据 lzm 的全宽 */
         .el-button{
        background-color:transparent;
        border:0;
        padding:12px;
        position: relative;
        top:28%;
        font-size: medium;
      /*   h4{
          font-family:SimSun ;   
        } */
        }
    }
    .searchButton {
        border: 0;
        background-color: transparent;
        position: absolute;
        right: 10%;
        top:30%;
    }

    .searchButton ::v-deep .el-icon {
         font-size: 24px; /* 调整图标大小 */
    }

    .wrap .el-button:hover {
         color: red;
    }

</style>